<!-- 企业信息页面 -->
<template>
  <div class="myAppPrise">
    <n-space vertical>
      <n-switch v-model:value="updateDisabled" />
      <n-form
        ref="formRef"
        :model="model"
        label-placement="left"
        :label-width="160"
        :disabled="updateDisabled"
        :style="{
          maxWidth: '640px',
        }"
      >
        <n-form-item label="企业名称" path="inputValue">
          <n-input v-model:value="model.inputValue" />
        </n-form-item>
        <n-form-item label="企业分类" path="selectValue">
          <n-select
            v-model:value="model.selectValue"
            :options="generalOptions"
            class="w300"
          />
        </n-form-item>
        <div class="license-uploading">
          <n-form-item label="营业执照" path="business">
            <n-input v-model:value="model.business" class="w200" />
          </n-form-item>
          <n-button type="info"> 上传 </n-button>
        </div>
        <n-form-item label="其他属性" path="property">
          <n-input v-model:value="model.property" class="w200" />
        </n-form-item>
        <div class="acc-pass">
          <n-form-item label="管理员账号" path="account">
            <n-input v-model:value="model.account" />
          </n-form-item>
          <n-form-item label="密码" path="password">
            <n-input v-model:value="model.password" />
          </n-form-item>
        </div>
      </n-form>
    </n-space>
  </div>
</template>

<script>
import { NForm, NFormItem, NInput, NSelect, NButton } from "naive-ui";
import { defineComponent, ref } from "vue";

export default defineComponent({
  components: {
    NForm,
    NFormItem,
    NInput,
    NSelect,
    NButton,
  },
  setup() {
    useHead({ title: "企业信息" });

    const formRef = ref(null);
    const model = ref({
      inputValue: null,
      selectValue: null,
      business: null,
      property: null,
      account: null,
      password: null,
    });
    return {
      updateDisabled: ref(false),
      formRef,
      model,
      generalOptions: ["groode", "veli good", "emazing", "lidiculous"].map(
        (v) => ({
          label: v,
          value: v,
        })
      ),
    };
  },
});
</script>
<style lang="scss" scoped>
.myAppPrise {
  padding-top: 20px;
  :deep(.w300) {
    width: 300px;
  }
  :deep(.w200) {
    width: 200px;
  }
  // 上传按钮
  .license-uploading {
    display: flex;
    :deep(.n-button) {
      width: 160px;
      margin-left: 20px;
    }
  }

  .acc-pass {
    display: flex;
    :deep(.n-form-item-blank) {
      width: 200px !important;
    }
  }
}
</style>
